<template>
  <div>
    <div class="content" v-if="headerAdd">
      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
        <el-form-item label="用户名">
          <el-input
            v-model="queryParams.userName"
            clearable
            placeholder="用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="数据趋势类别">
          <el-select
            v-model="queryParams.trendsType"
            placeholder="请选择"
            class="slect"
            clearable
          >
            <el-option
              v-for="item in [
                { value: '1', label: '消费' },
                { value: '2', label: '展现' },
                { value: '3', label: '点击' },
              ]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" @click="btnAdd">新增</el-button>
        <el-button type="primary" plain @click="getList">查询</el-button>
      </el-form>
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        style="width: 100%"
      >
      <el-table-column prop="userName" label="用户名"></el-table-column>
       
        <el-table-column prop="trendsType" label="数据趋势类别">
          <template slot-scope="scope">
            {{
              scope.row.trendsType === "1"
                ? "消费"
                : scope.row.trendsType === "2"
                ? "展现"
                : "点击"
            }}
          </template>
        </el-table-column>
        <el-table-column
        
          prop="trendsId"
          label="数据趋势编码"
        ></el-table-column>
        <el-table-column prop="trendsNumber" label="趋势数量"></el-table-column>
        <el-table-column
          prop="trendsGenerateTime"
          label="产生时间"
        ></el-table-column>
        <el-table-column label="趋势类型">
          <template slot-scope="scope">
            {{ changeProductType(scope.row.productType) }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="userId" label="用户Id"></el-table-column> -->
        
        <el-table-column prop="cityCode" label="城市名称"></el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleView(scope.row)"
              >查看</el-button
            >
            <el-button type="text" size="small" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="handleDel(scope.row.trendsId)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer" v-if="headerAdd">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <add
      v-if="addShow"
      :objData="objData"
      :isEdit="isEdit"
      @handleCancle="handleCancle"
    ></add>
    <detail
      v-if="viewShow"
      :objData="objData"
      @handleCancle="handleCancle"
    ></detail>
  </div>
</template>
<script>
import { list, del } from "@/api/ptzy/sjqs";
import add from "./component/add";
import detail from "./component/detail";
import { mapState } from "vuex";
export default {
  name: "fukuang",
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: "",
        userName: "",
        trendsType: "",
      },
      headerAdd: true,
      addShow: false,
      viewShow: false,
      loading: false,
      isEdit: false,
      tableData: [],
      total: 0,
    };
  },
  components: {
    add,
    detail,
  },
  computed: {
    ...mapState(["user"]),
  },
  mounted() {
    // TODO:
    // this.queryParams.userId = this.user.id;
    this.getList();
  },
  methods: {
    // 趋势类型
    changeProductType(type) {
      let TrendsTypeS = {
        2: "搜索",
        3: "信息流",
        4: "电商",
        5: "阿拉丁",
        6: "知识营销",
      };
      return TrendsTypeS[type];
    },
    handleCancle() {
      this.addShow = false;
      this.headerAdd = true;
      this.viewShow = false;
      this.isEdit = false;
      this.getList();
    },
    // 新增
    btnAdd() {
      this.addShow = true;
      this.viewShow = false;
      this.headerAdd = false;
      this.isEdit = false;
    },
    // 编辑
    handleEdit(row) {
      this.addShow = true;
      this.viewShow = false;
      this.headerAdd = false;
      this.isEdit = true;
      this.objData = row;
    },
    // 查看
    handleView(row) {
      this.addShow = false;
      this.viewShow = true;
      this.headerAdd = false;
      this.objData = row;
    },
    // 删除
    handleDel(trendsId) {
      console.log(trendsId);
      this.$confirm("确定要删除该条记录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          del({ trendsId }).then((res) => {
            if (res.code === 200) {
              this.$message.success("删除成功");
              this.getList();
            }
          });
        })
        .catch(() => {});
    },
    // 查询列表
    getList() {
      this.loading = true;
      list(this.queryParams).then((response) => {
        this.tableData = response.rows;
        this.total = +response.total;
        this.loading = false;
      });
    },
    handleCurrentChange(e) {
      this.queryParams.pageNum = e;
      this.getList();
    },
    handleSizeChange(e) {
      this.queryParams.pageSize = e;
      this.getList();
    },
  },
};
</script>
<style scoped>
.content {
  width: 98%;
  margin: 0 auto;
  margin-top: 30px;
}
.footer {
  display: flex;
  justify-content: end;
  padding-right: 40px;
  padding-top: 23px;
}
</style>
